<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Title</title>

  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

  <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


</head>

<body>
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">员工修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">用户id</label>
            <div class="col-sm-10">
              <input type="text" name="userId" class="form-control" id="user_id_update_input"
                     placeholder="user_id">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input type="text" name="userName" class="form-control" id="user_name_update_input"
                     placeholder="user_name">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">职位</label>
            <div class="col-sm-10">
              <input type="text" name="userRole" class="form-control" id="user_role_update_input"
                     placeholder="user_role">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">部门</label>
            <div class="col-sm-10">
              <input type="text" name="userDept" class="form-control" id="user_dept_update_input"
                     placeholder="user_dept">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">部门id</label>
            <div class="col-sm-10">
              <input type="text" name="deptId" class="form-control" id="dept_id_update_input"
                     placeholder="dept_id">
              <span class="help-block"></span>
            </div>
          </div>


          <div class="form-group">
            <label class="col-sm-2 control-label">update_time</label>
            <div class="col-sm-10">
              <input type="text" name="updateTime" class="form-control" id="update_time_update_input"
                     placeholder="update_time" >
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">create_time</label>
            <div class="col-sm-10">
              <input type="text" name="createTime" class="form-control" id="create_time_update_input"
                     placeholder="create_time" >
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">update_name</label>
            <div class="col-sm-10">
              <input type="text" name="updateName" class="form-control" id="update_name_update_input"
                     placeholder="update_name" >
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">create_name</label>
            <div class="col-sm-10">
              <input type="text" name="createName" class="form-control" id="create_name_update_input"
                     placeholder="create_name" >
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">dr</label>
            <div class="col-sm-10">
              <input type="text" name="dr" class="form-control" id="dr_update_input"
                     placeholder="dr" >
              <span class="help-block"></span>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
      </div>
    </div>
  </div>
</div>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">用户添加</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">用户id</label>
            <div class="col-sm-10">
              <input type="text" name="userId" class="form-control" id="user_id_add_input"
                     placeholder="user_id">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" >姓名</label>
            <div class="col-sm-10">
              <input type="text" name="userName" class="form-control" id="user_name_add_input"
                     placeholder="user_name">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">职位</label>
            <div class="col-sm-10">
              <input type="text" name="userRole" class="form-control" id="user_role_add_input"
                     placeholder="user_role">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">部门</label>
            <div class="col-sm-10">
              <input type="text" name="userDept" class="form-control" id="user_dept_add_input"
                     placeholder="user_dept">
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">部门id</label>
            <div class="col-sm-10">
              <input type="text" name="deptId" class="form-control" id="dept_id_add_input"
                     placeholder="dept_id">
              <span class="help-block"></span>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>
<!--管理员信息-->
<div class="modal fade" tabindex="-1" role="dialog" id="ad_manage">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">当前管理员</h4>
      </div>
      <div class="modal-body">
        <p>
          <input type="text" id="manager" disabled="disabled">
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="loginOff()">注销当前用户</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--页面主体-->
<div class="container">
  <!-- 标题 -->
  <div class="row">
    <div class="col-md-12">
      <h1>SpringBoot-CRUD</h1>
    </div>
  </div>
  <!-- 按钮 -->
  <div class="row">
    <div class="col-md-4 col-md-offset-8">
      <button class="btn btn-primary" id="emp_add_modal_btn" onclick="a1()">新增</button>
      <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
      <button class="btn btn-danger" id="admin_manage_btn" onclick="admin()">当前管理员</button>
    </div>
  </div>
  <!-- 显示表格数据 -->
  <div class="row">
    <div class="col-md-12">
      <table class="table table-hover" id="emps_table">
        <thead>
        <tr>
          <th>
            <input type="checkbox" id="check_all"/>
          </th>
          <th>用户id</th>
          <th nowrap="">用户名</th>
          <th nowrap="">用户身份</th>
          <th nowrap="">部门id</th>
          <th nowrap="">用户所属部门</th>
          <th nowrap="">更新时间</th>
          <th nowrap="">创建时间</th>
          <th nowrap="">更新人</th>
          <th nowrap="">创建人</th>
          <th nowrap="">删除标记</th>
          <th nowrap="">部门名称</th>
          <th nowrap="">部门地址</th>
          <th nowrap="">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script type="text/javascript">



  <!--管理员信息-->
  function admin(){
    $("#ad_manage").modal("show");
  }

  window.onload = function to_page() {


   //在页面加载之前设置请求头
    $.ajax({
      url: "http://localhost:17793/User/selectAll",
      type: "GET",
      beforeSend: function (request) {
        var arrstr = document.cookie.split("; ");
        for (var i = 0; i < arrstr.length; i++) {
          var temp = arrstr[i].split("=");
          if (temp[0] == "token")
            request.setRequestHeader("token", temp[1])
        }
      },
      success: function (result) {

        //1、解析并显示员工数据
        build_emps_table(result);


      }
    });
  }

  function build_emps_table(result) {
    //清空table表格
    $("#emps_table tbody").empty();
    var arrstr = document.cookie.split("; ");
    for (var i = 0; i < arrstr.length; i++) {
      var temp = arrstr[i].split("=");
      if (temp[0] == "nms_username")
        document.getElementById('manager').value = temp[1];
    }

    var emps = result.obj;
    $.each(emps, function (index, item) {
      var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
      var userId = $("<td></td>").append(item.userId);
      var userName = $("<td></td>").append(item.userName);
      var userRole = $("<td></td>").append(item.userRole);
      var deptId = $("<td></td>").append(item.deptId);
      var userDept = $("<td></td>").append(item.userDept);
      var updateTime = $("<td></td>").append(item.updateTime);
      var createTime = $("<td></td>").append(item.createTime);
      var updateName = $("<td></td>").append(item.updateName);
      var createName = $("<td></td>").append(item.createName);
      var dr = $("<td></td>").append(item.dr);
      var deptName = $("<td></td>").append(item.deptName);
      var addNum = $("<td></td>").append(item.addNum);


      /**
       <button class="">
       <span class="" aria-hidden="true"></span>
       编辑
       </button>
       */
      var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
              .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
      //为编辑按钮添加一个自定义的属性，来表示当前员工各项信息
      editBtn.attr("edit-id", item.userId);
      editBtn.attr("edit-Name", item.userName);
      editBtn.attr("edit-Role", item.userRole);
      editBtn.attr("edit-deptId", item.deptId);
      editBtn.attr("edit-userDept", item.userDept);
      editBtn.attr("edit-updateTime", item.updateTime);
      editBtn.attr("edit-createTime", item.createTime);
      editBtn.attr("edit-updateName", item.updateName);
      editBtn.attr("edit-createName", item.createName);
      editBtn.attr("edit-dr", item.dr);
      var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
              .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
      //为删除按钮添加一个自定义的属性来表示当前删除的员工id
      delBtn.attr("del-id", item.userId);
      var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
      //var delBtn =
      //append方法执行完成以后还是返回原来的元素
      $("<tr></tr>").append(checkBoxTd)
              .append(userId)
              .append(userName)
              .append(userRole)
              .append(deptId)
              .append(userDept)
              .append(updateTime)
              .append(createTime)
              .append(updateName)
              .append(createName)
              .append(dr)
              .append(deptName)
              .append(addNum)
              .append(btnTd)
              .appendTo("#emps_table tbody");
    });
  }

  $(document).on("click", ".delete_btn", function () {

    var empId = $(this).attr("del-id");
    if (confirm("确认删除吗？")) {
      $.ajax({
        url: "http://localhost:17793/User/delete",
        type: "GET",
        data: {"id": empId},
        beforeSend: function (request) {
          var arrstr = document.cookie.split("; ");
          for (var i = 0; i < arrstr.length; i++) {
            var temp = arrstr[i].split("=");
            if (temp[0] == "token")
              request.setRequestHeader("token", temp[1])
          }
        },
        success: function (result) {
          alert("删除成功");
          build_emps_table(result);
        }
      });

    }
  });

  <!--编辑员工信息-->
  $(document).on("click", ".edit_btn", function () {
    var empId = $(this).attr("edit-id");
    var empId1 = $(this).attr("edit-id1");

    $("#user_id_update_input").val($(this).attr("edit-id"));
    $("#user_name_update_input").val($(this).attr("edit-Name"));
    $("#user_role_update_input").val($(this).attr("edit-Role"));
    $("#user_dept_update_input").val($(this).attr("edit-userDept"));
    $("#dept_id_update_input").val($(this).attr("edit-deptId"));
    $("#update_time_update_input").val($(this).attr("edit-updateTime"));
    $("#create_time_update_input").val($(this).attr("edit-createTime"));
    $("#update_name_add_input").val($(this).attr("edit-updateName"));
    $("#create_name_update_input").val($(this).attr("edit-createName"));
    $("#dr_update_input").val($(this).attr("edit-dr"));

    $("#empUpdateModal").modal("show");
    $("#emp_update_btn").click(function () {
      $.ajax({
        url: "http://localhost:17793/User/update",
        type: "GET",
        data: $("#empUpdateModal form").serialize(),
        beforeSend: function (request) {
          var arrstr = document.cookie.split("; ");
          for (var i = 0; i < arrstr.length; i++) {
            var temp = arrstr[i].split("=");
            if (temp[0] == "token")
              request.setRequestHeader("token", temp[1])
          }
        },
        success: function (result) {
          $('#empUpdateModal').modal('hide');
          build_emps_table(result);
        }
      });
    });


  });

  <!--新增员工-->
  function a1() {
    $("#empAddModal").modal("show")
    $("#emp_save_btn").click(function () {

      $.ajax({
        url: "http://localhost:17793/User/addAll",
        type: "POST",
        data: $("#empAddModal form").serialize(),
        beforeSend: function (request) {
          var arrstr = document.cookie.split("; ");
          for (var i = 0; i < arrstr.length; i++) {
            var temp = arrstr[i].split("=");
            if (temp[0] == "token")
              request.setRequestHeader("token", temp[1])
          }
        },
        success: function (result) {
          $('#empAddModal').modal('hide');
          build_emps_table(result);
        }
      });
    });

  }
  <!--注销当前管理员-->
  function loginOff(){
    $.ajax({
      url:"http://localhost:17793/admin/logOff",
      type:"GET",
      beforeSend: function (request) {
        var arrstr = document.cookie.split("; ");
        for (var i = 0; i < arrstr.length; i++) {
          var temp = arrstr[i].split("=");
          if (temp[0] == "token")
            request.setRequestHeader("token", temp[1])
        }
      },
      success:function (result){
        if(result.code =="200"){
        alert("已经注销")
          window.history.back(-1);
        }

      }


    })


  }


</script>
</body>
</html>
